@import "../../../styles/base";

$bgColor: #8F1DF7;
$tabBgColor: #9603D3;
$tabActiveBgColor: #FFE700;

$tabColor: #FBD36C;
$tabActiveColor: #C5026B;
$timeColor: #FFE837;

$progressBgColor: #FFFFFF;
$progressTitleColor: #FFFFFF;
$progressTitleBg: #6205DD;
$progressTextColor: #000000;
$progressValueBg: linear-gradient(90deg, #FFDD6E 0%, #FF7B3B 100%);
$progressBarBg:  #F0F0F0;


.task {
  background-color: $bgColor;
  overflow: hidden;
  min-height: 100vh;

  header {
    height: tovw(592);
    background: url("./images/header.png") center / 100% no-repeat;
    padding-top: tovw(84);

    &::after {
      content: '';
      display: flex;
      align-items: center;
      justify-content: center;
      width: tovw(644);
      height: tovw(146);
      background: url("./images/title.png") center / 100% no-repeat;
      margin: 0 auto;
    }
  }

  .back {
    position: absolute;
    top: tovw(57);
    left: tovw(30);
    width: tovw(48);
    height: tovw(48);
    background: url("./images/back.png") center / 100% no-repeat;
  }

  .tab {
    background: $tabBgColor;
    border-radius: tovw(42);
    height: tovw(84);
    width: tovw(710);
    margin: -45vw auto 0;
    align-items: center;
    padding: tovw(6);

    li {
      height: tovw(72);
      border-radius: tovw(42);
      font-size: tovw(32);
      color: $tabColor;
      text-align: center;
      font-weight: 400;
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;

      &::before {
        display: none;
      }

      &.active {
        background: $tabActiveBgColor;
        color: $tabActiveColor;
      }
    }
  }

  .container {
    background-color: $bgColor;
    border-radius: tovw(57) tovw(57) 0 0;
    margin-top: tovw(43);
    padding-top: tovw(28);
    padding-bottom: tovw(40);
    position: relative;

    .icon {
      display: flex;
      width: tovw(60);
      height: tovw(93);
      background: url("./images/icon.png") center center / 100% no-repeat;
      position: absolute;

      top: -3vw;

      &.left {
        left: 6vw;
      }

      &.right {
        right: 6vw;
      }
    }

    .time {
      font-size: tovw(26);
      color: $timeColor;
      letter-spacing: 0;
      font-weight: 400;
      padding-left: tovw(42);
      background: url("./images/timer.png") center left / tovw(36) no-repeat;
      width: tovw(340);
      margin: 0 auto;
    }

    .progress-list {
      overflow-y: auto;
      height: calc(100vh - 66vw - #{tovw(44)});
      padding: 0 tovw(44);
      margin-top: tovw(44);

      .title {
        background: $progressTitleBg;
        border-radius: tovw(20) tovw(20) 0 0;
        color: $progressTitleColor;
        width: tovw(170);
        height: tovw(86);
        display: flex;
        align-items: flex-start;
        justify-content: center;
        font-size: tovw(24);
        letter-spacing: 2.4px;
        text-align: center;
        font-weight: 600;
        padding-top: tovw(10);
      }

      .content {
        background: $progressBgColor;
        border-radius: tovw(25);
        margin-top: tovw(-36);
        padding: tovw(20) tovw(32);
        margin-bottom: tovw(32);
        position: relative;

        .desc {
          font-size: tovw(28);
          color: $progressTextColor;
          letter-spacing: 0;
          font-weight: 600;
        }

        .progress {
          height: tovw(32);
          width: tovw(598);
          margin: tovw(30) auto tovw(16);
          border-radius: tovw(16);
          overflow: hidden;

          &::-moz-progress-bar {
            background: $progressBarBg;
          }

          &::-webkit-progress-bar {
            background: $progressBarBg;
          }

          &::-webkit-progress-value {
            background: $progressValueBg;
            border-radius: tovw(16);
          }
        }

        .bonus {
          display: flex;
          font-size: tovw(24);
          color: $progressTextColor;
          letter-spacing: 0;
          font-weight: 400;

          .bonus-icon {
            padding-left: tovw(36);
            height: tovw(36);
            background: url("./images/coin.png") center left / tovw(32) no-repeat;
            @extend .heartBeat;

            &.coin {
              background: url("./images/coin.png") center left / tovw(32) no-repeat;
            }

            &.crystal {
              background: url("./images/crystal.png") center left / tovw(32) no-repeat;
            }

            &.hot {
              background: url("./images/hot.png") center left / tovw(32) no-repeat;
            }
          }
        }

        .done {
          display: flex;
          width: tovw(100);
          height: tovw(100);
          border-radius: 50%;
          overflow: hidden;
          background: url("./images/done.png") center center / 100% no-repeat;
          position: absolute;
          right: tovw(0);
          bottom: tovw(-40);
        }
      }
    }
  }
}

.heartBeat {
  animation: heartBeat 2s ease-in-out infinite;
}

@keyframes heartBeat {
  0% {
    background-size: tovw(32);
  }

  14% {
    background-size: tovw(36);
  }

  28% {
    background-size: tovw(32);
  }

  42% {
    background-size: tovw(36);
  }

  70% {
    background-size: tovw(32);
  }
}
